$(function() {
	// 个人化妆 
	$('.borSpan').on('mouseover', function() {
		$('.borSpanRed').css({
			"border-bottom": '1px solid #f42424'
		})
	})
	$('.borSpan').on('mouseout', function() {
		$('.borSpanRed').css({
			"border-bottom": '1px solid transparent'
		})
	})

	// 品牌筛选
	$(allObj.brandData).each(function(i, v) {
		$('.listBoxUl').append($('<li class="listBoxLi" data-id="' + v.id +'"><div class="list-img"><img src="' + v.data.src +'"></div><div class="list-name"><a  >宝姿Maybelline/美宝莲净澈多效卸妆水清爽型 舒缓 深层清洁 舒缓 补水 深层清洁 卸妆</a></div><div class="list-price">' +v.data.new +'</div><div class="list-btn"><a class="purchaseNow">立即购买</a></div></li>'))
	})
	
	// console.log(vv("宝"));
	// function vv(value){
	// 	return allObj.beatudyData.map(function(v,i){
	// 		v.data.title.includes(value) ? v:"ww";
	// 	})
	// }

	// 展开
	$('.branUnfold').on('click', function() {
		$('.brandBox').toggleClass('brandBoxShow')
		$('.branUnfold').toggleClass('branUnfoldShow')
	})

	$('.alphabetUl>li').hover(function() {
		$(this).addClass('alphabetli').siblings().removeClass('alphabetli')
	}, )
	$('.branMultipleChoice').on('click', function() {
		$('.brand').toggle()
		$('.alphabetSeach').toggle()
	})
	$('.alphabetQuit').on('click', function() {
		$('.brand').toggle()
		$('.alphabetSeach').toggle()
	})



	$(allObj.beatudyData).each(function(i, v) {
		$('.exhAreaUl').append($('<li class="exhAreaLi" data-id="' + v.id +'"><div class="exhAWrap"><div class="exhA-img"><a  ><img src="' +v.data.src +'"></a></div><div class="sider"><ul></ul></div><div class="exhA-lie"><div class="exhA-price">¥' +v.data.new + '</div><div class="exhA-num">已售<em>' + v.data.num +'</em>件</div></div><div class="exhA-name"><a  title="' + v.data.title + '">' + v.data.title +'</a></div><div class="exhA-store"><a   title="商创自营" class="store">商创自营</a><a   class="icon-kefu"></a></div><div class="label"></div><div class="exhA-operate"><a   class="compareLink"><input type="checkbox" class="comparison"><label class="exhA-label" for=""></label>对比</a><a   class="icon-aixin">收藏</a><a   class="shop icon-shop">加入购物车</a></div></div></li>'))
		// 追加小图片
		var dataInd = i;
		$(v.data.imgs).each(function(i, v) {
			$($('.sider>ul')[dataInd]).append($('<li class="curr"><img src="' + v + '">'))
		})
	})


	// 过滤
	function dataNew(x,y) {
		var data = new Array;
		// 遍历数值添加到数组
		let dataArr = new Array;
		if (x=="num") {
			$(allObj.beatudyData).each(function(i, v) {
				data.push(Number(v.data.num))
			})
			// 数组从大到小排序
			if (y==1) {
				data.sort(function(a, b) {
					return b - a;
				})
			}else{
				data.sort(function(a, b) {
					return a - b;
				})
			}
			for (var i = 0; i < data.length; i++) {
				for (var j = i+1; j < data.length; j++) {
					if (data[i] == data[j]) {
						data.splice(j,1)
						j--;
					}
				}
			}
			// 根据数组顺序 取出所对应对象
			dataArr = data.map(function(value, i) {
				return allObj.beatudyData.filter(function(v, i) {
					return value == Number(v.data.num);
				})
			})
		}else{
			$(allObj.beatudyData).each(function(i, v) {
				data.push(Number(v.data.new))
			})
			// 数组从大到小排序
			if (y==1) {
				data.sort(function(a, b) {
					return b - a;
				})
			}else{
				data.sort(function(a, b) {
					return a - b;
				})
			}
			// 数组去重
			// Array.from(new Set(data))
			for (var i = 0; i < data.length; i++) {
				for (var j = i+1; j < data.length; j++) {
					if (data[i] == data[j]) {
						data.splice(j,1)
						j--;
					}
				}
			}
			// 根据数组顺序 取出所对应对象
			dataArr = data.map(function(value, i) {
				return allObj.beatudyData.filter(function(v, i) {
					return value == Number(v.data.new);
				})
			})
		}
		// 清空盒子
		$('.exhAreaUl').html('');
		$('.exhASecTwoul').html('')
		
		// 数组扁平化  多维数组转一维数组
		var newDataArr = dataArr.flat();
		
		// 遍历追加
		$(newDataArr).each(function(i, v) {
			$('.exhASecTwoul').append($('<li class="exhASecTwoLi" data-id="'+v.id+'"><div class="exhTwoWrap"><div class="exhTwo-img"><a  ><img src="'+v.data.src+'" alt=""></a></div><div class="exhTwo-name"><a  >'+v.data.title+'</a><br>销量: '+v.data.num+' 评价: '+parseInt(Math.random()*10)+'</div><div class="exhTwo-store">商创自营<i></i></div><div class="exhTwo-price"><span class="exhTwo-New">¥'+v.data.new+'</span><span class="exhTwo-Old">¥'+v.data.old+'</span></div><div class="exhTwo-operate"><a  ><input type="checkbox" style="display: none;" id="input"><label for="input" class="exhTwo-label"></label>对比</a><a   class="icon-aixin">收藏</a><a   class="shop icon-shop">加入购物车</a></div></div></li>'))
			// 追加
			$('.exhAreaUl').append($('<li class="exhAreaLi" data-id="'+v.id+'"><div class="exhAWrap"><div class="exhA-img"><a  ><img src="' +v.data.src +'"></a></div><div class="sider"><ul></ul></div><div class="exhA-lie"><div class="exhA-price">¥' +v.data.new + '</div><div class="exhA-num">已售<em>' + v.data.num +'</em>件</div></div><div class="exhA-name"><a  title="' + v.data.title + '">' + v.data.title +'</a></div><div class="exhA-store"><a   title="商创自营" class="store">商创自营</a><a   class="icon-kefu"></a></div><div class="label"></div><div class="exhA-operate"><a   class="compareLink"><input type="checkbox" class="comparison"><label class="exhA-label" for=""></label>对比</a><a   class="icon-aixin">收藏</a><a   class="shop icon-shop">加入购物车</a></div></div></li>'))
			var dataInd = i;
			$(v.data.imgs).each(function(i, v) {
				$($('.sider>ul')[dataInd]).append($('<li class="curr"><img src="' + v + '">'))
			})
		})
		 toggol()
	}

	// 销量过滤
	let indSal = 0;
	var indNew = 0;
	var indRev=0;
	var indPr = 0;
	$('.filterSalesVolume').click(function() {
		indSal++;
		indNew = 0;
		indRev=0;
		indPr = 0;
		if (indSal % 2 == 0) {
			$(this).addClass('filterLiShowT').siblings().removeClass('filterLiShow filterLiShowT')
			dataNew('num', 2)
		} else {
			$(this).addClass('filterLiShow').removeClass('filterLiShowT');
			$(this).siblings().removeClass('filterLiShow filterLiShowT');
			dataNew("num", 1)
		}
	})


	// 新品过滤
	$('.filterNewProduct').click(function() {
		indNew++;
		indSal = 0;
		indRev=0;
		indPr = 0;
		if (indNew % 2 == 0) {
			$(this).addClass('filterLiShowT').siblings().removeClass('filterLiShow filterLiShowT')
			dataNew('num', 1)
		} else {
			$(this).addClass('filterLiShow').removeClass('filterLiShowT');
			$(this).siblings().removeClass('filterLiShow filterLiShowT')
			dataNew('new', 2)
		}
	})

	$('.filterReview').click(function() {
		indRev++;
		indSal = 0;
		indNew = 0;
		indPr = 0;
		if (indRev % 2 == 0) {
			$(this).addClass('filterLiShowT').siblings().removeClass('filterLiShow filterLiShowT')
			dataNew('new', 1)
		} else {
			$(this).addClass('filterLiShow').removeClass('filterLiShowT');
			$(this).siblings().removeClass('filterLiShow filterLiShowT')
			dataNew('num', 2)
		}
	})
	// 价格
	$('.filterPrice').click(function() {
		indPr++;
		indSal = 0;
		indNew = 0;
		indRev=0;
		if (indPr % 2 == 0) {
			$(this).addClass('filterLiShowT').siblings().removeClass('filterLiShow filterLiShowT')
			
			dataNew('new',2)
		} else {
			$(this).addClass('filterLiShow').removeClass('filterLiShowT');
			$(this).siblings().removeClass('filterLiShow filterLiShowT')
			dataNew('new',1)
		}
	})
	
	// 默认
	$('.filterDefault').click(function(){
		indSal = 0;
		indNew = 0;
		indRev=0;
		indPr = 0;
		$(this).addClass('filterLiShow').siblings().removeClass('filterLiShow filterLiShowT')
		$(this).removeClass('filterLiShowT').siblings().removeClass('filterLiShowT filterLiShow')
		$('.exhAreaUl').html('');
		$('.exhASecTwoul').html('')
		$(allObj.beatudyData).each(function(i, v) {
			$('.exhAreaUl').append($('<li class="exhAreaLi" data-id="' + v.id +'"><div class="exhAWrap"><div class="exhA-img"><a  ><img src="' +v.data.src +'"></a></div><div class="sider"><ul></ul></div><div class="exhA-lie"><div class="exhA-price">¥' +v.data.new + '</div><div class="exhA-num">已售<em>' + v.data.num +'</em>件</div></div><div class="exhA-name"><a  title="' + v.data.title + '">' + v.data.title +'</a></div><div class="exhA-store"><a   title="商创自营" class="store">商创自营</a><a   class="icon-kefu"></a></div><div class="label"></div><div class="exhA-operate"><a   class="compareLink"><input type="checkbox" class="comparison"><label class="exhA-label" for=""></label>对比</a><a   class="icon-aixin">收藏</a><a   class="shop icon-shop">加入购物车</a></div></div></li>'))
			// 追加小图片
			var dataInd = i;
			$(v.data.imgs).each(function(i, v) {
				$($('.sider>ul')[dataInd]).append($('<li class="curr"><img src="' + v + '">'))
			})
			$('.exhASecTwoul').append($('<li class="exhASecTwoLi" data-id="'+v.id+'"><div class="exhTwoWrap"><div class="exhTwo-img"><a  ><img src="'+v.data.src+'" alt=""></a></div><div class="exhTwo-name"><a  >'+v.data.title+'</a><br>销量: '+v.data.num+' 评价: '+parseInt(Math.random()*10)+'</div><div class="exhTwo-store">商创自营<i></i></div><div class="exhTwo-price"><span class="exhTwo-New">¥'+v.data.new+'</span><span class="exhTwo-Old">¥'+v.data.old+'</span></div><div class="exhTwo-operate"><a  ><input type="checkbox" style="display: none;" id="input"><label for="input" class="exhTwo-label"></label>对比</a><a   class="icon-aixin">收藏</a><a   class="shop icon-shop">加入购物车</a></div></div></li>'))
		})
		toggol()
	})
	$(brandData).each(function(i,v){
		$('.brandUl').append($('<li class="brandLi"><a href="javascript:;" class="brandLiA"><img src="'+v.src+'"class="brandLiImg" title="'+v.title+'"><span>'+v.title+'</span></a></li>'))
	})










	// 切换图片
	function toggol(){
		$('.curr').on('mouseover', function() {
			$(this).parent().parent().prev().find('img').attr('src',''+$(this).children().attr('src')+'')
		})
	}
	toggol()


	// 对比
	$('.compareLink').on('click', function() {
		$(this).toggleClass('compareLinkShow')
		$(this).find('.exhA-label').toggleClass('exhA-labelShow')
	})


	// 爱心
	$('.icon-aixin').on('click', function() {
		$(this).toggleClass('icon-aixinShow')
	})


	// 展示区右边
	function exhAR() {
		$(exhAreaRData).each(function(i, v) {
			$('.exhARUl').append($(
				'<li class="exhARLi"><div class="exhARWrap"><div class="exhAR-img"><a  ><img src="' +
				v.src + '"></a></div><div class="exhAR-lie"><div class="exhAR-price">' + v
				.price + '</div></div><div class="exhAR-name"><a   title="' +
				v.title + '">' + v.title + '</a></div><div class="exhAR-num">已售<em>' + v.num +
				'</em>件</div></div></li>'))
		})
	}
	exhAR();
	$('.takeBack').on('click', function() {
		$('.exhARUl').html('')
		$(this).parent().toggleClass('takeBackRightA')
		$(this).toggleClass('takeBackSpan')
		$('.exhAreaRight').toggleClass('exhAreaRightShow')
		$('.exhAreaRightSec').toggleClass('exhAreaRightSecShow')
		$('.exhARText').fadeToggle(500)
		setTimeout(function() {
			exhAR()
		}, 500)
	})

	// 猜你喜欢
	$(clearfixData).each(function(i, v) {
		$('.clearfixUl').append($(
			'<li class="clearfixLi"><div class="clearfixWrap"><div class="clearfix-img"><a  ><img src="' +
			v.src + '"></a></div><div class="clearfix-lie"><div class="exhAR-price">' + v
			.price + '</div></div><div class="clearfix-name"><a   title="' + v
			.title + '">' + v.title + '</a></div><div class="clearfix-num">已售<em>' + v.num +
			'</em>件</div></div></li>'))
	})
	
	
	
	
	
	
	
	
	
	// 大小图切换
	$('.large').click(function(){
		$('.exhA-sec').show();
		$('.exhASecTwo').hide();
		$(this).addClass('exhARed')
		$('.thumbnail').removeClass('exhARed')
	})
	$('.thumbnail').click(function(){
		$('.exhA-sec').hide();
		$('.exhASecTwo').show();
		$(this).addClass('exhARed')
		$('.large').removeClass('exhARed')
	})
	$(allObj.beatudyData).each(function(i,v){
		$('.exhASecTwoul').append($('<li class="exhASecTwoLi" data-id="'+v.id+'"><div class="exhTwoWrap"><div class="exhTwo-img"><a  ><img src="'+v.data.src+'" alt=""></a></div><div class="exhTwo-name"><a  >'+v.data.title+'</a><br>销量: '+v.data.num+' 评价: '+parseInt(Math.random()*10)+'</div><div class="exhTwo-store">商创自营<i></i></div><div class="exhTwo-price"><span class="exhTwo-New">¥'+v.data.new+'</span><span class="exhTwo-Old">¥'+v.data.old+'</span></div><div class="exhTwo-operate"><a  ><input type="checkbox" style="display: none;" id="input"><label for="input" class="exhTwo-label"></label>对比</a><a   class="icon-aixin">收藏</a><a   class="shop icon-shop">加入购物车</a></div></div></li>'))
	})
	
	
	
	
	
	
	
	
	
	
	
	
	$('.listBoxLi').click(function(){
		var id = $(this).attr("data-id")
		window.localStorage.setItem("id"+id+"",id)
		window.localStorage.setItem("id",id)
		window.localStorage.setItem("index",1)
		location.href='particulars.html'
	})
	$('.exhAreaLi').click(function(){
		var id = $(this).attr("data-id")
		window.localStorage.setItem("id"+id+"",id)
		window.localStorage.setItem("id",id)
		window.localStorage.setItem("index",2)
		location.href='particulars.html'
	})
	$('.exhASecTwoLi').click(function(){
		console.log(1);
		var id = $(this).attr("data-id")
		window.localStorage.setItem("id"+id+"",id)
		window.localStorage.setItem("id",id)
		window.localStorage.setItem("index",2)
		location.href='particulars.html'
	})
	
	
	
	
	// 价格区间
	$('.filterLi>input').on('input change click',function(){
		$('.quit').show()
	})
	$('.empty').click(function(){
		$('.minInput').val('')
		$('.maxInput').val('')
	})
	$('.confirm').on('click',function(){
		$('.quit').hide()
		var start = $('.minInput').val();
		var end = $('.maxInput').val();
		let arr = new Array;
		if (start.length === 0 || end.length === 0) {
			return
		}
		$('.exhAreaUl').html('')
		arr.push($(allObj.beatudyData).filter(function(i,v){
			return v.data.new >= start && v.data.new <= end;
		}))
		$(arr[0]).each(function(i,v){
			$('.exhAreaUl').append($('<li class="exhAreaLi" data-id="' + v.id +'"><div class="exhAWrap"><div class="exhA-img"><a  ><img src="' +v.data.src +'"></a></div><div class="sider"><ul></ul></div><div class="exhA-lie"><div class="exhA-price">¥' +v.data.new + '</div><div class="exhA-num">已售<em>' + v.data.num +'</em>件</div></div><div class="exhA-name"><a  title="' + v.data.title + '">' + v.data.title +'</a></div><div class="exhA-store"><a   title="商创自营" class="store">商创自营</a><a   class="icon-kefu"></a></div><div class="label"></div><div class="exhA-operate"><a   class="compareLink"><input type="checkbox" class="comparison"><label class="exhA-label" for=""></label>对比</a><a   class="icon-aixin">收藏</a><a   class="shop icon-shop">加入购物车</a></div></div></li>'))
			var dataInd = i;
			$(v.data.imgs).each(function(i, v) {
				$($('.sider>ul')[dataInd]).append($('<li class="curr"><img src="' + v + '">'))
			})
		})
	})
})
